<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#334256"
      text-color="#ffffff"
      active-text-color="#20a0ff"
      router
    >
      <template v-for="item in items">
        <template>
          <el-menu-item :index="item.index" :key="item.index">
              <i :class="item.icon"></i>
              {{item.title}}
          </el-menu-item>
        </template>
      </template>

    </el-menu>
  </div>
</template>

<script>
    import bus from'../assets/js/bus.js'
    export default {
        name: "Aside",
      data(){
        return{
          collapse: false,
          items:[
            {
              icon: 'el-icon-document',
              index: 'Index',
              title: '系统首页',
            },
            {
              icon: 'el-icon-document',
              index: 'UserManage',
              title: '用户管理',
            },
            /*{
              icon: 'el-icon-document',
              index: 'SingerManage',
              title: '歌手管理',
            },
            {
              icon: 'el-icon-document',
              index: 'SongListManage',
              title: '歌单管理',
            },*/
            {
              icon: 'el-icon-document',
              index: 'ArticleManage',
              title: '文章管理',
            },
            {
              icon: 'el-icon-document',
              index: 'TagManage',
              title: '标签管理',
            },
            {
              icon: 'el-icon-document',
              index: 'VideoManage',
              title: '学习视频管理',
            },
            {
              icon: 'el-icon-document',
              index: 'SourceManage',
              title: '学习资源管理',
            },
            {
              icon: 'el-icon-document',
              index: 'UserSourceManage',
              title: '用户上传资源管理',
            },
            {
              icon: 'el-icon-document',
              index: 'VideoStyleManage',
              title: '视频风格管理',
            },
            {
              icon: 'el-icon-document',
              index: 'StudySourceStyleManage',
              title: '资源类型管理',
            }
          ]
        }
      },
      computed:{
        onRoutes(){
          return this.$route.path.replace('/','');
        }
      },
      created(){
        //通过Bus进行组件间的通信，来折叠侧边栏
        bus.$on('collapse',msg =>{
          this.collapse = msg
        })
      }
    }
</script>

<style scoped>
  .sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    background-color: #334256;
    overflow-y: scroll;
  }

  .sidebar::-webkit-scrollbar{
    width: 0;
  }

  .sidebar-el-menu:not(.el-menu--collapse){
    width: 180px;
  }

  .sidebar >ul {
    height: 100%;
  }
</style>
